<template>
    <div class="home">
        <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px' }">
                <card1 id="card1" prefix="" company="（人）" :end-val="orderInfo.accountTotal" title="累计订单数"
                       backgroundColor="#318def" icon="ios-people" iconColor="#fff" titleColor="#fff" countColor="#fff"
                       width="34px" height="34px"/>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px' }">
                <card1 id="card4" prefix="" company="（单）" :end-val="orderInfo.applyTotal" title="服务中单数"
                       backgroundColor="#e6a23c"
                       countColor="#fff"
                       iconColor="#fff"
                       titleColor="#fff"
                       icon="ios-apps" width="34px" height="34px"/>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px'}">
                <card1 id="card12"
                       :bordered="false"
                       :end-val="orderInfo.payDays"
                       company="（天）"
                       backgroundColor="#C8C466"
                       countColor="#fff"
                       icon="md-pricetag"
                       iconColor="#fff"
                       titleColor="#fff"
                       title="已结算单数"/>
            </Col>
        </Row>
        <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px' }">
                <card1 id="card5" :bordered="false" company="（单）" :end-val="orderInfo.todayTotal" title="今日新增订单数" backgroundColor="#fff4df"
                       :image="require('@/assets/icon/comment.png')"
                       width="34px" height="34px"/>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px' }">
                <card1 id="card6"
                       :bordered="false"
                       company="（单）"
                       :end-val="orderInfo.yesterDayTotal"
                       backgroundColor="#6993fe"
                       countColor="#fff"
                       icon="md-person-add"
                       iconColor="#fff"
                       titleColor="#fff"
                       title="昨日订单数"/>
            </Col>
            <Col :xs="24" :sm="24" :md="12" :lg="8" :style="{ marginBottom: '10px' }">
                <card1 id="card7"
                       :bordered="false"
                       :end-val="orderInfo.sameMonthTotal"
                       company="（单）"
                       backgroundColor="#8950fe"
                       countColor="#fff"
                       icon="md-cloud-download"
                       iconColor="#fff"
                       titleColor="#fff"
                       title="当月订单数"/>
            </Col>
        </Row>
        <Row :gutter="10" style="margin-left:0 !important; margin-right: 0 !important;">
            <Col :xs="24" :sm="24" :lg="24" :xl="24" :style="{ marginBottom: '10px' }">
                <visit-volume/>
            </Col>
        </Row>
    </div>
</template>

<script>
import card1 from "@/views/my-components/widget/card1";
import visitVolume from "../../home/components/visitVolume.vue";
import {statisticsOrderData} from "@/api/hmzd/hmOrder";

export default {
    name: "home",
    components: {card1, visitVolume},
    data() {
        return {
            orderInfo : {
                accountTotal: 0,
                applyTotal: 0,
                payDays: 0,
                todayTotal: 0,
                yesterDayTotal: 0,
                sameMonthTotal: 0,


            }
        }
    },
    mounted() {
        statisticsOrderData().then(res => {
            if(res.success) {
                this.orderInfo = res.data;
            }
        })
    }
}
</script>

<style lang="scss">
.home {
}
</style>
